<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>02-recordList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/containerWrapping.css">
</head>
<body>
  <div class="container container-wrapping">
    <h3>寻找失主记录：</h3>
    <hr>
    <!-- 搜索头 -->
    <div class="searchHeader">
      <form class="form-inline">
        <label class="my-1 mr-2" for="forCategoryList">物品类别</label>
        <select class="custom-select my-1 mr-lg-5" id="forCategoryList">
        </select>
      </form>
    </div>
    <br>
    <!-- 展示记录 -->
    <div class="recordListTable table-responsive">
      <table class="table table-hover text-center table-sm">
        <thead>
          <tr class="">
            <th scope="col">#</th>
            <th scope="col">标题</th>
            <th scope="col">细节</th>
            <th scope="col">种类</th>
            <th scope="col">申请时间</th>
            <th scope="col">详情</th>
            <th scope="col">操作</th>
          </tr>         
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>钥匙</td>
            <td>在三教学楼，图书馆，123</td>
            <td>钥匙</td>
            <td>2019-01-12</td>
            <td><a href="${pageContext.request.contextPath }/admin/02/recordListDetail.jsp" class="alert-link">详情</a></td>
            <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
          </tr>           
          <tr>
            <th scope="row">1</th>
            <td>钥匙</td>
            <td>在三教学楼，图书馆，123</td>
            <td>钥匙</td>
            <td>2019-01-12</td>
            <td><a href="${pageContext.request.contextPath }/admin/02/recordListDetail.jsp" class="alert-link">详情</a></td>
            <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
          </tr>
          <tr>
            <th scope="row">1</th>
            <td>钥匙</td>
            <td>在三教学楼，图书馆，123</td>
            <td>钥匙</td>
            <td>2019-01-12</td>
            <td><a href="${pageContext.request.contextPath }/admin/02/recordListDetail.jsp" class="alert-link">详情</a></td>
            <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
          </tr>       
        </tbody>
      </table>
      <br>
      <!-- 分页显示 -->
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item active"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div> <!-- recordListTable table-responsive -->
  </div> <!-- container -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/categoryAjax.js"></script>
</body>
</html>